<template>
	<view style="min-height: 100vh;position: relative;background-color: #fff;">
		<u-navbar title='视频抓图'  left-icon-color="white" :titleStyle="{'color':'white'}" bgColor="#13989a" leftIconColor="#fff" :autoBack="true" 
			:placeholder="true"></u-navbar>
		<video :autoplay="false" v-if='videoUrl' :src="videoUrl" style="width: 100%;height: 400rpx;"></video>
		<view v-else
			style="background-color: #010101;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 400rpx;">
			<image src='https://renovationcdn.jiachuangnet.com/%E6%91%84%E5%83%8F%E5%A4%B4%E7%A6%BB%E7%BA%BF.png'
				style="width:100rpx;height: 100rpx;margin: 20rpx 0;"></image>
			<view style="text-align: center;height: 90rpx;line-height: 90rpx;color:#e6e6e6;font-size: 28rpx;">选择需要播放的录像
			</view>
		</view>
		<view class="container">
			<view class="floor">
				<view class="title" v-if="msg&&msg.assignName">
					<text>{{msg.assignName}}</text>
					<text style="color: #13989a;font-weight: normal;" @click="detaliShow=true">详情</text>
				</view>
				<view class="videoWrapper">
					<view v-if="videoList.length>0"
						style="display: flex; flex-wrap: wrap; justify-content: space-between;">
						<view class="item" v-for="(v,i) in videoList" :key="i"
							style="width: 40vw;border: 1rpx solid #eee;border-radius: 10rpx;margin: 10rpx;">
							<video :autoplay="true" :id="myVideo+'i'" v-if='v.videoUrl && v.showRealVideo'
								:src="v.videoUrl" style="width: 100%;height: 204rpx;"></video>
							<!-- 伪装播放按钮（未加载时显示） -->
							<view v-if="v.videoUrl && !v.showRealVideo"
								style="width: 100%;height: 204rpx;background-color: #eee;display: flex;justify-content: center;align-items: center;"
								@click="initVideo(i)">
								<view class="play-icon" style="font-size: 40rpx;color: #333;">▶</view>
							</view>
							<view v-if="!v.videoUrl">
								<image src='https://renovationcdn.jiachuangnet.com/novideo.jpg'
									style="width: 100%;height: 100rpx;"></image>
								<view
									style="text-align: center;height: 90rpx;line-height: 90rpx;color:#e6e6e6;font-size: 24rpx;">
									当前店铺暂无实时画面</view>
							</view>
							<view
								style="padding: 20rpx 10rpx;font-size: 24rpx;font-weight: 500;;border-top:0.5px solid #eee;color: #2979ff;" v-if="v.serialNumber==serialNumber">
								{{v.serialNumber}}
						
							</view>
							<view
							v-else
								style="padding: 20rpx 10rpx;font-size: 24rpx;font-weight: 500;;border-top:0.5px solid #eee;">
								{{v.serialNumber}}
							</view>
						</view>
					</view>
					<view v-else>
						<view style="width: 100%;height: 50vh;" >
							<u-empty
							        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
									width="100%"
									height="100%"
									text="摄像头列表为空"
							>
							</u-empty>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="imagePoolShow" @close="imagePoolShow=false" round="10" mode="bottom">
			<view class="overdueForm" style="padding-top: 20rpx;min-height: 50vh;">
				<view style="text-align: center;font-size: 30rpx;margin-bottom: 50rpx;">
					视频抓拍列表
				</view>
				<!-- <u-subsection activeColor="#13989A" :list="list" :current="current"
					@change="sectionChange"></u-subsection> -->
				<view style="margin-top: 20rpx;min-height: 50vh;max-height: 70vh;overflow-y: auto;">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(listItem,listIndex) in videoCaptureList" :key="listIndex">
							<view style="position: relative;">
								<image :src="'http://'+listItem" @click="viewImage(listIndex)"
									style="width: 25vw;height: 25vw;" mode="aspectFill"></image>
								<view style="position: absolute;right: 0;top: 0;">
									<u-icon name="close-circle-fill" color="#625d5a" size="20" @click="deletePool(listIndex)"></u-icon>
								</view>
							</view>
							<!-- <text class="grid-text">{{listIndex}}</text> -->
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</u-popup>
		<u-popup :show="detaliShow" @close="detaliShow=false" round="10" mode="bottom">
			<view class="overdueForm" v-if="msg&&msg.assignName">
				<view
					style="text-align: center;font-size: 30rpx;margin-bottom: 50rpx;margin-top: 50rpx;font-weight: 700;">
					基础信息
				</view>
				<view class="floor" style="background-color: #f7f7f7;margin: 20rpx;">
					<view class="title">
						{{msg.assignName}}
					</view>
					<view class="form">
						<text class="lable">店铺地址：</text>
						<text class="value">{{msg.address}}</text>
					</view>
					<view class="form">
						<text class="lable">创建时间：</text>
						<text class="value">{{msg.createTime}}</text>
					</view>
				</view>
				<view class="floor" style="background-color: #f7f7f7;margin: 20rpx;">
					<view class="title">
						店员
					</view>
					<view class="form">
						<text class="lable">姓名：</text>
						<text class="value" v-if="msg.storeStaffName">{{msg.storeStaffName}}</text>
					</view>
					<view class="form">
						<text class="lable">电话：</text>
						<text class="value" v-if="msg.storeStaffPhone">{{msg.storeStaffPhone}}</text>
					</view>
				</view>
				<view>
				</view>
			</view>
		</u-popup>
		<view class="footer flex" style="align-items: center;" v-if="!flag">
			<image @click="imagePoolShow=true" :src="'http://'+videoCaptureList[0]" mode="" v-if="videoCaptureList[0]"
				style="width: 100rpx;height: 100rpx;border-radius: 20rpx;position: absolute; left: 68rpx;top: 26rpx;">
			</image>
			<view v-else
			@click="imagePoolShow=true"
				style="width: 100rpx;height: 100rpx;border-radius: 20rpx;background-color: #e6e6e6;position: absolute; left: 68rpx;top: 26rpx;">
			</view>
			<view class="box" v-if="videoCaptureList.length>0">
				<u-badge type="primary" max="99" :value="videoCaptureList.length"></u-badge>
			</view>
			<view class="flex" style="flex-direction: column;" @click="getCameraCapture">
				<u-icon name="camera-fill" color="#13989a" size="28"></u-icon>
				<text>抓图</text>
			</view>
			<!-- <view  class="flex" style="position: absolute; right: 68rpx;top: 26rpx;flex-direction: column;" @click="goBack">
				<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
				<text>返回</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagePoolShow:false,
				videoUrl: null,
				videoList: [],
				videoCaptureList: [],
				assignTaskId: 0,
				serialNumber: null,
				msg:null,
				detaliShow:false,
				flag:false,
			}
		},
		onLoad(option) {
			this.assignTaskId = option.assignTaskId
			this.getViedoList()
			this.storePatrolDataVo()
			let app = getApp();
			this.videoCaptureList = app.globalData.videoCaptureList
			if(option.flag){
				this.flag=true
			}
		},
		onUnload() {
			let app = getApp();
			app.globalData.videoCaptureList = JSON.parse(JSON.stringify(this.videoCaptureList))
		},
		methods: {
			// goBack(){
			// 	uni.navigateTo({
			// 		delta: 1
			// 	});
			// },
			storePatrolDataVo(){
				uni.$u.http.get('/patrol/StorePatrolDataVo',{
					params:{
						assignTaskId:this.assignTaskId
					}
				}).then(res=>{
					if(res){
						this.msg=res
					}
				})
			},
			deletePool(i){
				this.videoCaptureList.splice(i,1)
			},
			viewImage(listIndex) {
				let listImage=this.videoCaptureList.map(item=>'http://'+item)
				uni.previewImage({
					current: listIndex,
					urls: listImage,
					longPressActions: {
						itemList: ['保存图片'],
						success: data => {
							uni.closePreviewImage()
							/* 保存图片到系统相册 */
							if (data.tapIndex == 0) {
								uni.getImageInfo({
									src: listImage[listIndex],
									success: function(res) {
										console.log(res)
										uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
											filePath: res.path, //图片文件路径
											success: function() {
												uni.showToast({
													title: '图片保存成功',
													icon: 'none',
												});
											},
											fail: function(e) {
												console.log(e);
												uni.showToast({
													title: '图片保存失败',
													icon: 'none',
												});
											},
										});
									},
									fail: function(e) {
										console.log(e);
										uni.closePreviewImage()
										uni.showToast({
											title: '图片保存失败',
											icon: 'none',
										});
									},
								})
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getCameraCapture() {
				if (this.videoUrl) {
					uni.$u.http.get('/patrol/getCameraCapture', {
						params: {
							serialNumber: this.serialNumber,
						}
					}).then(res => {
						if (res) {
							this.videoCaptureList.push(res)
						}
					})
				} else {
					uni.$u.toast('当前选中摄像头不在线，无法抓图 :)');
				}

			},
			initVideo(i) {
				this.videoUrl = this.videoList[i].videoUrl
				this.serialNumber = this.videoList[i].serialNumber
				// this.videoList[i].showRealVideo=true
			},
			getViedoList() {
				uni.$u.http.get('/patrol/getStoreAllCamera', {
					params: {
						assignTaskId: this.assignTaskId,
					}
				}).then(res => {
					if (res) {
						this.videoList = res.map(item => {
							return {
								serialNumber: item.serialNumber,
								videoUrl: item.videoUrl,
								showRealVideo: false
							}
						})
					}
				})
			},
			toPathC(url) {
				uni.navigateTo({
					url: `/packageC/pages/${url}/index`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		margin: 10rpx 0;
		font-size: 24rpx;
	
		.lable {
			color: #818181;
			margin-right: 50rpx;
		}
	
		.value {
			color: #636363;
		}
	}
	.box {
		position: absolute;
		left: 148rpx;
		top: 18rpx;
		height: 20px;
		border-radius: 15px;
		z-index: 10;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		justify-content: center;
		align-items: center;
		background-color: #f8f8fa;
	}

	.container {
		width: 100vw;
		overflow: hidden;
		background-color: #fff;
	}

	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.workItem {
		font-size: 24rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.floor {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.title {
			display: flex;
			justify-content: space-between;
			font-weight: 600;
			font-size: 30rpx;
			line-height: 80rpx;
			border-bottom: 1px solid #f4f4f4;
		}
	}
</style>